<template>
  <continer>
    <template slot="search">
      <QuickSearch :advForm="quickSearchForm" @QuickSearch="search"></QuickSearch>
    </template>
    <template slot="oprate">
      <el-button type="primary" size="mini" @click="search">查询</el-button>
      <el-button size="mini" @click="addConfig"  v-functions="['phoneBar_status_insert']">新增</el-button>
    </template>
    <template slot="content">
      <configTable
              :headers="tableHeaders"
              :data="tableData"
              :showPagination="false"
              @checkHeadersChange="checkHeadersChange">
        <template slot="column">
          <template v-for="(item, index) in checkHeaders">
            <u-table-column
                    :show-overflow-tooltip="true"
                    :resizable="false"
                    :prop="item.prop"
                    :label="item.label"
                    :key="index"
                    :sortable="item.sortable"
                    v-if="item.show && item.prop !== 'oprate' && item.prop !== 'status'">
            </u-table-column>
            <u-table-column
                    :label="item.label"
                    :width="68"
                    :key="index"
                    v-if="item.prop === 'status'">
              <template slot-scope="scope">
                <i class="V7_iconfont V7_iconV7tubiao_dian" :class="scope.row.status === 'enable' ? 'enable-span':'disable-span'"></i><span>{{scope.row.status === 'enable'?'启用':'停用'}}</span>
              </template>
            </u-table-column>
            <u-table-column
                    :width="100"
                    :label="item.label"
                    fixed="right"
                    :key="index"
                    v-if="item.prop === 'oprate' && item.show">
              <template slot-scope="scope">
                <span @click="editConfig(scope.row)" class="oprate-span" v-functions="['phoneBar_status_edit']" v-if="!scope.row.isSystem">编辑</span>
                <span @click="enableOrDisabled(scope.row)" class="oprate-span" :class="scope.row.status === 'disable'?'':'red-span'" v-functions="['phoneBar_status_enableOrDisable']"  v-if="!scope.row.isSystem">{{scope.row.status === 'enable' ? '停用': '启用'}}</span>
                <span @click="deleteConfig(scope.row)" v-functions="['phoneBar_status_delete']" v-if="!scope.row.isSystem" class="oprate-span red-span">删除</span>
              </template>
            </u-table-column>
          </template>
        </template>
      </configTable>
      <AddOrEditPhoneBar :drawerData="drawer" ref="phoneBarRef" @refresh="fetchData('refresh')"></AddOrEditPhoneBar>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import configTable from '@/components/configCommon/table.vue'
import QuickSearch from '@/common/views/advancedSearch/QuickSearch.vue'
import AddOrEditPhoneBar from './AddOrEditPhoneBar.vue'
import { BasicModule } from '@/store/modules/config/basic'
import { deepClone } from '@/utils/common'
interface DrawerObj {
    title: string
    form: object
}
@Component({
  name: 'PhoneBarConfig',
  components: { continer, configTable, AddOrEditPhoneBar, QuickSearch }
})
export default class extends Vue {
  [x: string]: any
  private allCount: number = 0
  private tempList: [] = []
  private drawer: DrawerObj = { title: '新增电话条', form: { displayName: '', file: '', memo: '' } }
  private tableHeaders: object[] = [
    { label: '电话条状态', prop: 'name' },
    { label: '类型', prop: 'type' },
    { label: '状态', prop: 'status', sortable: true },
    { label: '最后更新时间', prop: 'updateTime', sortable: true },
    { label: '最后操作人', prop: 'agentName', sortable: true },
    { label: '操作', prop: 'oprate' }
  ]

  private typeArr: object[] = [
    { name: '全部', _id: '' },
    { name: '启用', _id: 'enable' },
    { name: '停用', _id: 'disable' }
  ]

  private quickSearchForm = {
    form: {
      name: '',
      status: ''
    },
    advSearchOptions: [ // 快捷检索的数据(语音文件名称)
      { label: '状态名称', inputType: 'input', placeholder: '请输入状态名称', name: 'name', clearable: true },
      { label: '状态', inputType: 'select', clearable: true, selectData: this.typeArr, name: 'status' }
    ]
  }

  private checkHeaders: [] = []

  private tableData: any = []

  private search () { // 名称 || 状态搜索 （前台过滤）
    const filterData = deepClone(this.tempList)
    if (this.quickSearchForm.form.name && this.quickSearchForm.form.status) {
      this.tableData = filterData.filter(item => item.name.indexOf(this.quickSearchForm.form.name) > -1 && item.status === this.quickSearchForm.form.status)
    } else if (this.quickSearchForm.form.name) {
      this.tableData = filterData.filter(item => item.name.indexOf(this.quickSearchForm.form.name) > -1)
    } else if (this.quickSearchForm.form.status) {
      this.tableData = filterData.filter(item => item.status === this.quickSearchForm.form.status)
    } else {
      this.tableData = this.tempList
    }
  }

  private addConfig () {
    (this as any).$refs.phoneBarRef.openOrCloseDrawer()
    this.drawer = { title: '新增电话条', form: { name: '', type: '自定义', isSystem: 0, status: 'enable' } }
  }

  private editConfig (row: any) {
    (this as any).$refs.phoneBarRef.openOrCloseDrawer()
    this.drawer = { title: '修改电话条', form: { name: row.name, type: row.type, isSystem: row.isSystem, status: row.status, _id: row._id } }
  }

  private enableOrDisabled (row: any) { // 停用 / 启用
    this.$confirm(`确定要${row.status === 'enable' ? '停用' : '启用'}【${row.name}】吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const actionData = { _id: row._id, status: row.status === 'enable' ? 'disable' : 'enable' }
      const data = { url: '/call/action/config/phoneBarStatus/save', method: 'POST', data: actionData }
      BasicModule.BasicCommonAction(data).then((res: any) => {
        if (res && res.success) {
          const str = row.status === 'enable' ? `停用【${row.name}】成功` : `启用【${row.name}】成功`
          this.$message({ message: str, type: 'success' })
          this.fetchData('refresh')
        }
      }).catch((e) => {
        console.log(e)
      })
    })
  }

  private deleteConfig (row: any) {
    this.$confirm(`确定要删除【${row.name}】吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const data = { url: '/call/action/config/phoneBarStatus/delete', method: 'POST', data: { _id: row._id } }
      BasicModule.BasicCommonAction(data).then((res: any) => {
        if (res && res.success) {
          this.$message({ message: `删除【${row.name}】成功！`, type: 'success' })
          this.fetchData('refresh')
        }
      })
    }).catch((e) => {
      console.log(e)
    })
  }

  private fetchData (refresh) {
    const data = { url: '/call/action/config/phoneBarStatus/list', method: 'POST', data: {} }
    BasicModule.BasicCommonAction(data).then((res: any) => {
      if (res && res.success) {
        const list = res.list || []
        list.forEach((item: any) => {
          item.type = item.isSystem ? '系统默认' : '自定义'
          const agentObj = this.$store.state.common.publicCache.userListObj[item.updateUser]
          item.agentName = agentObj ? agentObj.name : '--'
        })
        this.tableData = list
        this.tempList = list
        this.allCount = res.count || 0
        if (refresh) { // 编辑，停用，启用，删除，重新更新一下前台检索的数据
          this.search()
        }
      }
    })
  }

  private checkHeadersChange (checkList) {
    this.$set(this, 'checkHeaders', checkList)
  }

  private beforeMount () {
    this.fetchData(null)
  }
}
</script>

<style lang="stylus" scoped>
  .oprate-span,.radio-span
    cursor pointer
    color $c-main
    margin 0 4px
  .red-span,.disable-span
    color $c-danger
  .enable-span
    color $c-green
  .disable-span,.enable-span
    font-size 12px
</style>
